<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
      <el-form-item label="提测服务" prop="status">
        <el-select v-model="queryParams.consumerProducts" class="!w-240px" clearable placeholder="请选择提测服务">
          <el-option v-for="dict in selectService" :key="dict.label" :label="dict.name" :value="dict.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
          <el-option v-for="dict in getStatus()" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" v-hasPermi="['system:testing-record:query']">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="提测ID" prop="id" />
      <el-table-column align="center" label="提测服务" prop="consumerProducts" />
      <el-table-column align="center" label="提测额度" prop="consumerLimit" />
      <el-table-column align="center" label="消费账户" prop="consumerAccount" />
      <el-table-column align="center" label="关联消费账号" prop="branch" />
      <el-table-column align="center" label="提测人" prop="testingUserName" />
      <el-table-column align="center" label="提测时间" prop="testingTime" />
      <el-table-column align="center" label="交付状态" prop="status" />
      <el-table-column align="center" label="备注" prop="notes" />
      <el-table-column :width="300" align="center" label="操作">
        <template #default="scope">
          <el-button v-hasPermi="['system:testing-record:report']" link type="primary" @click="handleReport(scope.row)">
            报告
          </el-button>
          <el-button v-hasPermi="['system:testing-record:delete']" link type="danger"
            @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
      @pagination="getList" />
  </ContentWrap>
</template>
<script lang="ts" setup>
defineOptions({ name: 'commitTestRecord' })
import * as TestCommitApi from '@/api/commit'
import { useAppStore } from '@/store/modules/app'
const { push, currentRoute } = useRouter()
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const selectService = ref([] as any)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  consumerProducts: '',
  status: '',
  projectId: projectId.value
})
const queryFormRef = ref() // 搜索的表单

watch(
  () => projectId.value,
  () => {
      queryParams.projectId = projectId.value
      getList();
  }
);

// 提测服务下拉
const getService = async () => {
  let res = await TestCommitApi.getTestItems()
  let result = [] as any
  res.forEach((item) => {
    result.push(...item.testItems)
  })
  selectService.value = result
}

// 提测状态下拉
const getStatus = () => {
  return [
    {
      label: '未交付',
      value: 0
    },
    {
      label: '已交付',
      value: 1
    },
    {
      label: '停止交付',
      value: 2
    }
  ]
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await TestCommitApi.getTestRecords(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.consumerProducts = ''
  queryFormRef.value.resetFields()
  handleQuery()
}
// 删除操作
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await TestCommitApi.deleteTestRecord({ id })
    message.success(t('common.delSuccess'))
    // 刷新列表
    getList()
  } catch { }
}
// 报告
const handleReport = () => {
  push('/testReport/report')
}
onMounted(() => {
  getService()
  if(projectId.value){
    getList();
  }
});
</script>
